<template>
	<view class="container">
		<Gap height="20rpx" />
		<view class="w-94 rounded-xl bg-white flex flex-col items-center">
			<Gap height="20rpx" />
			<view class="bg w-96"></view>
			<Gap height="30rpx" />
			<view class="flex w-full">
				<view class="w-1/2 flex items-center justify-center">
					<image src="@/static/image/jifen-blance.png" mode="widthFix" class="blance" />
					<view class="flex flex-col justify-center h-full">
						<text class="pt-1 font-normal text-sm pl-2 ">我的积分：{{ userInfo.integral || 0 }}</text>
						<text class="pt-1 font-normal text-sm pl-2 "
							@tap.stop="uiwu.openWindow('/pages/pointsmall/rule')">积分规则</text>
					</view>
				</view>
				<view class="w-1/2 flex justify-end">
					<image src="@/static/image/jifen-btn.png" mode="widthFix" class="btn mr-4"
						@tap="uiwu.openWindow('/pages/pointsmall/usage')" />
				</view>
			</view>
			<Gap height="30rpx" />
		</view>
		<Gap height="20rpx" />
		<view class="scroll-container w-96 " id="scrollContainer" :class="menuTopClass">
			<scroll-view class="scrollview whitespace-nowrap w-full overflow-x-hidden" scroll-x="true">
				<view class="menu-item" v-for="(item, index) in menuTablist" :key="index"
					@tap.stop="swiperTab(item, index)" :class="index == ActiveIndex ? 'menu-hover' : ''">{{
						item.cate_name }}</view>
			</scroll-view>
		</view>
		<view class="flex justify-center prize-container w-full rounded-t-2xl">
			<view class="flex justify-between flex-wrap w-96 mx-2 mb-9" v-if="listData.length > 0">
				<view v-for="(item, index) in listData" :key="index"
					class="prize-content flex flex-col items-center bg-white rounded-2xl mt-2"
					@tap.stop="openWindow(item)">
					<image :src="item?.image" mode="scaleToFill" class=" rounded-2xl mt-3" />
					<text>{{ item?.store_name }}</text>
					<view class="flex justify-between items-center operate w-94 relative mb-3">
						<image src="@/static/image/jifen-coin.png" mode="widthFix" />
						<text class="intgral absolute">{{ item?.integral || 0 }}</text>
						<view class="btn-yes flex justify-center items-center"
							v-if="userInfo.integral >= item?.integral">立即兑换</view>
						<view v-else class="btn-no flex justify-center items-center">积分不足</view>
					</view>
				</view>
			</view>
			<view class="flex justify-center w-96 mx-2 mb-9" v-else>
				<text class=" my-5 w-full text-center">暂无数据</text>
			</view>
		</view>
		<Gap height="100rpx" />
	</view>
	<Footer />
</template>

<script setup lang="ts">
import { debounce } from "@/api/common";
import { goodslist, mallCategory, uiwu } from "@/api/interface/interface";
import Gap from "@/components/gap.vue";
import Footer from "@/components/footer.vue";
import { userStore } from "@/store/userStore";
import { onLoad, onPageScroll, onReachBottom, onShow } from "@dcloudio/uni-app";
import { computed, ref, toRefs } from "vue";
const menuTablist = ref<Array<object>>([]);
const listData = ref<Array<object>>([]);
const ActiveIndex = ref<number>(0)
const pageNum = ref<number>(1)
const more = ref<string>('loading');
const isLock = ref<boolean>(true);
const cateId = ref<number>(0)
const menuIsTop = ref(false);
const { userInfo } = toRefs(userStore());
/**
 * 获取分类
 */
const getMallCategory = async (): Promise<any> => {
	const { data } = await mallCategory();
	menuTablist.value = data
	cateId.value = data[0].id
	getGoodslist()
}

const openWindow = (item: any) => {
	// if(Number(userInfo.value.integral) < Number(item.integral)) return uiwu.toast('可用积分不足')
	uni.navigateTo({
		url: `/pages/pointsmall/detail?id=${item.id}`
	})
}

/**
 * 切换tab分类
 */
const swiperTab = (item: object, index: number): void => {
	cateId.value = item.id
	ActiveIndex.value = index
	getGoodslist(false)
}


/**
 * 获取商品列表
 */
const getGoodslist = async (mack: boolean = false): Promise<any> => {
	if (!mack) pageNum.value = 1
	const { data: { data, total } } = await goodslist({
		page: pageNum.value,
		cate_id: cateId.value
	});
	isLock.value = true
	uiwu.setlist({
		isMore: mack,
		listData,
		total,
		listRow: data,
		more,
		pageNum
	})
}

const menuTopClass = computed(() => {
	return menuIsTop.value ? "scroll-container-top" : "";
});


onPageScroll(debounce(() => {
	uni.createSelectorQuery().select("#scrollContainer").boundingClientRect(data => {
		console.log(data.top, "data.top");
		if (data.top <= 25) {
			menuIsTop.value = true;
		} else {
			menuIsTop.value = false;
		}
	}).exec();
}, 10));

/**
 * 加载更多
 */
onReachBottom(() => {
	if (!isLock.value) return
	isLock.value = false
	pageNum.value++
	getGoodslist(true)
})
onLoad(() => {
	getMallCategory()
})
onShow(() => {
	const { updateUserInfo } = userStore();
	updateUserInfo();
})
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;

	.bg {
		height: 173px;
		background: url("../../static/image/jifen-banner.png") no-repeat;
		background-size: 100% 100%;
	}

	.blance {
		width: 100rpx;
		height: 100rpx;
	}

	.btn {
		width: 81px;
		height: 28px;
	}

	.btn-yes {
		width: 120rpx;
		height: 46rpx;
		background: url("@/static/image/jifen-btn2.png") no-repeat;
		background-size: 100% 100%;
		color: white;
		font-size: 24rpx;
	}

	.btn-no {
		width: 120rpx;
		height: 46rpx;
		color: white;
		font-size: 24rpx;
		background: url("@/static/image/jifen-btn3.png") no-repeat;
		background-size: 100% 100%;
	}

	.jifen-coin {
		width: 22px;
		height: 22px;
	}

	.scroll-container-top {
		top: 0;
		position: sticky;
		z-index: 1000;
		/* 确保它在其他内容上方 */
		//transition: background-color 0.3s ease; /* 添加平滑过渡效果 */
		@apply bg-white w-full;

	}

	.scrollview ::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
		-webkit-appearance: none;
		background: transparent;
		color: transparent;
	}



	.menu-item {
		color: rgba(114, 113, 113, 1);
		@apply inline-block text-center px-4 py-1 rounded-3xl text-sm font-semibold my-1;
	}

	.menu-hover {
		background: linear-gradient(180deg, rgba(230, 98, 107, 1) 0%, rgba(220, 0, 12, 1) 100%);
		@apply text-white ml-3;
	}

	.prize-container {
		//background-color: #E6E8FA;

		.prize-content {
			width: 346rpx;
		}

		image {
			height: 310rpx;
			width: 310rpx;
		}

		text {
			width: 310rpx;
			color: #4C4C4C;
			@apply text-sm py-2;
		}

		.operate {
			image {
				width: 44rpx;
				height: 44rpx;
			}

			.intgral {
				width: 100rpx;
				color: #E60012;
				font-size: medium;
				font-weight: bold;
				left: 50rpx;
			}
		}
	}
}
</style>
